/**
 * 移动端
 * @param radio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const MobileImage = (radio?: number, color?: string) => {
    const r = radio || 1;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 40 * r;
    const ctx = canvas.getContext('2d')!;

    ctx.save();
    ctx.strokeStyle = "rgba(0,0,0,0)";
    ctx.miterLimit = 4;
    ctx.fillStyle = "";
    ctx.scale(0.0385, 0.039);
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(647.499 * r, 60.657 * r);
    ctx.lineTo(375.167 * r, 60.657 * r);
    ctx.bezierCurveTo(285.56499999999994 * r, 60.657 * r, 212.66999999999996 * r, 133.552 * r, 212.66999999999996 * r, 223.154 * r);
    ctx.lineTo(212.66999999999996 * r, 797.061 * r);
    ctx.bezierCurveTo(212.66999999999996 * r, 886.663 * r, 285.56499999999994 * r, 959.558 * r, 375.167 * r, 959.558 * r);
    ctx.lineTo(647.499 * r, 959.558 * r);
    ctx.bezierCurveTo(737.101 * r, 959.558 * r, 809.9960000000001 * r, 886.663 * r, 809.9960000000001 * r, 797.0609999999999 * r);
    ctx.lineTo(809.9960000000001 * r, 223.154 * r);
    ctx.bezierCurveTo(809.9970000000001 * r, 133.552 * r, 737.1010000000001 * r, 60.65699999999998 * r, 647.499 * r, 60.65699999999998 * r);
    ctx.closePath();
    ctx.moveTo(755.831 * r, 797.061 * r);
    ctx.bezierCurveTo(755.831 * r, 856.794 * r, 707.2330000000001 * r, 905.392 * r, 647.5 * r, 905.392 * r);
    ctx.lineTo(375.167 * r, 905.392 * r);
    ctx.bezierCurveTo(315.43399999999997 * r, 905.392 * r, 266.83599999999996 * r, 856.7940000000001 * r, 266.83599999999996 * r, 797.061 * r);
    ctx.lineTo(266.83599999999996 * r, 223.154 * r);
    ctx.bezierCurveTo(266.83599999999996 * r, 163.421 * r, 315.43399999999997 * r, 114.822 * r, 375.167 * r, 114.822 * r);
    ctx.lineTo(431.335 * r, 114.822 * r);
    ctx.bezierCurveTo(431.48499999999996 * r, 129.649 * r, 443.52799999999996 * r, 141.632 * r, 458.39 * r, 141.632 * r);
    ctx.lineTo(564.275 * r, 141.632 * r);
    ctx.bezierCurveTo(579.1379999999999 * r, 141.632 * r, 591.18 * r, 129.649 * r, 591.3299999999999 * r, 114.822 * r);
    ctx.lineTo(647.4979999999999 * r, 114.822 * r);
    ctx.bezierCurveTo(707.2309999999999 * r, 114.822 * r, 755.829 * r, 163.42000000000002 * r, 755.829 * r, 223.154 * r);
    ctx.lineTo(755.829 * r, 797.061 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(564.276 * r, 819.304 * r);
    ctx.lineTo(458.391 * r, 819.304 * r);
    ctx.bezierCurveTo(443.435 * r, 819.304 * r, 431.308 * r, 831.43 * r, 431.308 * r, 846.387 * r);
    ctx.bezierCurveTo(431.308 * r, 861.3439999999999 * r, 443.43399999999997 * r, 873.4699999999999 * r, 458.39099999999996 * r, 873.4699999999999 * r);
    ctx.lineTo(564.276 * r, 873.4699999999999 * r);
    ctx.bezierCurveTo(579.232 * r, 873.4699999999999 * r, 591.3589999999999 * r, 861.3439999999999 * r, 591.3589999999999 * r, 846.387 * r);
    ctx.bezierCurveTo(591.3589999999999 * r, 831.43 * r, 579.232 * r, 819.304 * r, 564.276 * r, 819.304 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    return canvas.toDataURL('image/png');
}


export { MobileImage };